<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
    <link href="style/bootstrap.min.css" rel="stylesheet">	
    <script type="text/javascript" src="jquery/jquery.min.js"></script>
    
  </head>
  <style>
  		.btn{
  		  margin-left: 65px
  		}
  		input{
  			height:25px;
  		}
  </style>
  
  <body>
  <h3>已有商品列表</h3>
  
    <table border="2" id="table">
    	<thead>
    		<tr>
	    		<th>商品编号</th>
	    		<th>名称</th>
	    		<th>价格</th>
	    		<th>是否上架</th>
	    		<th colspan="2">操作</th>
	    	</tr>
    	</thead>
    	<tbody>
    	
    	<c:forEach items="${list}" var ="prod">
    		<tr id="${prod.prod_num }">
    			<td>${prod.prod_num}</td>
    			<td>${prod.prod_name}</td>
    			<td>${prod.prod_price}</td>
    			<td>${prod.enable}</td>
    			<td><a class="btn" id="edit" href ="javascript:void(0)" rel="${prod.prod_num}" onclick="edit(event)">查看</a> </td>
    			<td><a href="javascript:void(0)" name="delLink" class="btn error" rel="${prod.prod_num }">删除</a></td>
    		</tr>
    	</c:forEach>
    	
    	</tbody>
    </table>
    
   
	    <label>商品编号：</label>
	    <input id="num" type="text" class="span3" ><br/><br/>
	    <label>商品名称：</label>
	    <input id="name" type="text" class="span3"><br/><br/>
	    <label>商品价格：</label>
	    <input id="price" type="text" class="span3"><br/><br/>
	    
	    <label  class="radio"  style="margin-left: 25px;">
			是：<input  type="radio" checked=" " name="optionsRadios" value="true">&nbsp;&nbsp;
			否：<input  type="radio"  name="optionsRadios" value="false">
		</label>
		<br/><br/><br/>
	
	    <button class="btn" type="button" onclick="addProd()">添加</button>
	    <button class="btn" type="button" rel="${prod.prod_num}" id="toEdit" onclick="toEdit()" >修改</button>
			    
    <script type="text/javascript">
    	
    	var xmlHttp;
    	/*创建XMLHttpRequest对象*/
  		function createXMLHttpRequest() {
  			if(window.ActiveXObject) {
  	  			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  	  		} else {
  	  			xmlHttp = new XMLHttpRequest();
  	  		}
  		}
  		
  		//编辑
  		var num1;
  		function edit(event){
  			createXMLHttpRequest();
  			var eve = event || window.event ;
    		var element = eve.srcElement || eve.target ;
    		num1 = element.rel;
    	
   			xmlHttp.open("GET", "prod.jspx?task=edit&num="+num1, true);
			xmlHttp.onreadystatechange = editBack; 
            xmlHttp.send();  
  		
  		}
  		
  		
  		function editBack(){
  			if(xmlHttp.readyState == 4) {
  				if(xmlHttp.status == 200) {
  					var xml = xmlHttp.responseXML;
  					
  					var num = xml.getElementsByTagName("prod_num")[0].childNodes[0].nodeValue;
  					var name = xml.getElementsByTagName("prod_name")[0].childNodes[0].nodeValue;
  					var price = xml.getElementsByTagName("prod_price")[0].childNodes[0].nodeValue;
  					var enable = xml.getElementsByTagName("enable")[0].childNodes[0].nodeValue;
  				
  					
  					
  					 document.getElementById("num").value= num ;
		    		 document.getElementById("name").value = name ;
		    		 document.getElementById("price").value = price ;
		    		 
		    		 var radios = document.getElementsByName("optionsRadios");
				
					for(var i=0;i < radios.length;i++){
						if(radios[i].value == enable){
							radios[i].checked = true;
						}
					}
	
		   			
  				}
  			}
  		}
  		
  		
  		function toEdit(){
  			createXMLHttpRequest();
  			var num = document.getElementById("num").value;
  			var name = document.getElementById("name").value;
    		var price = document.getElementById("price").value;
    		var radios= document.getElementsByName("optionsRadios");
    		var enable; 
    		for(var i = 0 ; i< radios.length ; i++){
    			if(radios[i].checked==true){
    				enable=radios[i].value;
    			}
    		}
  			
			xmlHttp.open("POST", "prod.jspx", true);
  			xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  			xmlHttp.onreadystatechange = toEditBack; 
            xmlHttp.send("task=edit&num="+num+"&name="+name+"&price="+price+"&enable="+enable);
  
    		 	
    	}
    	
    	function toEditBack(){
    		if(xmlHttp.readyState == 4) {
  				if(xmlHttp.status == 200){
  				var num = document.getElementById("num").value;
				var name = document.getElementById("name").value;
   				var price = document.getElementById("price").value;
   				
				var radios= document.getElementsByName("optionsRadios");
				var enable;
				for(var j=0; j<radios.length; j++){
					if(radios[j].checked==true){
						enable=radios[j].value;
					}
				}
				
				var tr = document.getElementById(num);
				tr.cells[0].childNodes[0].nodeValue = num;
				tr.cells[1].childNodes[0].nodeValue = name;
				tr.cells[2].childNodes[0].nodeValue = price;
				tr.cells[3].childNodes[0].nodeValue = enable;
			
			    
  				}
  			}	 
    	
     	}
    	
  		
  		//删除
  		var delLinks = document.getElementsByName("delLink");
		    	for(var i = 0;i < delLinks.length;i++) {
		    		delLinks[i].onclick = delRow;
		    	}
    	
    	var nowTr;
    	function delRow(){
    		createXMLHttpRequest();
    		//alert(this.rel);
 			nowTr = this.parentNode.parentNode;
    		xmlHttp.open("POST", "prod.jspx", true);
  			xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  			xmlHttp.onreadystatechange = delBack; 
            xmlHttp.send("task=del&num="+this.rel); 
    	}
    	
    	function  delBack(){
    		if(xmlHttp.readyState == 4) {
  				if(xmlHttp.status == 200) {
  				
  				document.getElementsByTagName("tbody")[0].removeChild(nowTr);
  				}
  			}
    	}
    	
    	
    
    	//添加
    	function addProd(){
    		createXMLHttpRequest();
    		var num = document.getElementById("num").value;
    		var name = document.getElementById("name").value;
    		var price = document.getElementById("price").value;
    		var radios= document.getElementsByName("optionsRadios");
    		var enable; 
    		for(var i = 0 ; i< radios.length ; i++){
    			if(radios[i].checked==true){
    				enable=radios[i].value;
    			}
    		}
    		
    		
  			xmlHttp.open("POST", "prod.jspx", true);
  			xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  			xmlHttp.onreadystatechange = callback; 
            xmlHttp.send("task=add&num="+num+"&name="+name+"&price="+price+"&enable="+enable);   

    	}
    	
    	function callback(){
    		if(xmlHttp.readyState == 4) {
  				if(xmlHttp.status == 200) {
 
					var num = document.getElementById("num").value;
 					var name = document.getElementById("name").value;
	   				var price = document.getElementById("price").value;
	   				
 					var radios= document.getElementsByName("optionsRadios");
 					var enable;
	 					for(var j=0; j<radios.length; j++){
	 						if(radios[j].checked==true){
	 							enable=radios[j].value;
	 						}
	 					}
	 				
 				    var tr = document.createElement("tr");
	   		
		    		var td1 = document.createElement("td");
					var text1 = document.createTextNode(num);
					td1.appendChild(text1);
					
					var td2 = document.createElement("td");
					var text2 = document.createTextNode(name);
					td2.appendChild(text2);
					
					var td3 = document.createElement("td");
					var text3 = document.createTextNode(price);
					td3.appendChild(text3);
					
					var td4 = document.createElement("td");
					var text4 = document.createTextNode(enable);
					td4.appendChild(text4);
					
					var td5 = document.createElement("td");
					var a = document.createElement("a");
					a.setAttribute("href", "javascript:void(0)");
					a.setAttribute("id", edit);
					a.setAttribute("rel", num);
					a.appendChild(document.createTextNode("查看"));
					td5.appendChild(a); 
				
				
				 	
				    var td6 = document.createElement("td");
					var a1 = document.createElement("a");
					a1.setAttribute("href", "javascript:void(0)");
					a1.setAttribute("rel", num);
					a1.onclick = delRow;
					a1.appendChild(document.createTextNode("删除"));
					td6.appendChild(a1); 
				
				//alert(document.getElementById("tr").appendChild(td1));
					tr.appendChild(td1);
					tr.appendChild(td2);
					tr.appendChild(td3);
					tr.appendChild(td4);
					tr.appendChild(td5);
					tr.appendChild(td6);
					
					document.getElementsByTagName("tbody")[0].appendChild(tr);   
  					
  					                                                                                                                                       
		  					
  				}
  			}
    	
}
    	
    </script>
    
 </body>
</html>
